<template>
  <a-card
    :bordered="false"
    :bodyStyle="{
      paddingBottom: 0,
    }">
    <div class="table-page-search-wrapper">
      <a-row :gutter="10">
        <a-form layout="inline">
          <a-col :md="6" :sm="24" style="display:flex;">
            <!-- <a-form-item> -->
            <el-radio-group style="flex-shrink:0;margin-right:8px;" v-model="dateType" size="small">
              <el-radio-button label="单据"></el-radio-button>
              <el-radio-button label="开票"></el-radio-button>
            </el-radio-group>
            <a-range-picker style="flex:1;" v-model="queryParam.rangeData" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            <!-- </a-form-item> -->

          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="客户简称">
              <a-input v-model="queryParam.Customer"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="24">
            <a-form-item label="业务员">
              <a-input v-model="queryParam.Saler"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="单据编号">
              <a-input v-model="queryParam.Code"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="24" style="display:flex;">
            <a-select
              allowClear
              ref="select"
              v-model:value="queryParam.selectType"
              placeholder="发票状态"
              style="width: 120px;margin-left: 8px;flex:1;"
              @change="getDataList()">
              <a-select-option value="1">已开票</a-select-option>
              <a-select-option value="0">未开票</a-select-option>
              <a-select-option value="2">已退票</a-select-option>
            </a-select>
            <div style="flex-shink:0;display: flex;justify-content: space-between;">
              <a-button
                style="margin-left: 10px;margin-right:10px"
                type="primary"
                @click="() => {
                  this.pagination.current = 1;
                  this.getDataList();
                }
                ">查询</a-button>
              <!-- <a-button style="margin:0 8px" @click="repossess">重置</a-button> -->
              <a-button type="primary" icon="download" @click="downloadTemplate">导出</a-button>
            </div>
          </a-col>
        </a-form>
      </a-row>
    </div>

    <a-table
      ref="table"
      :scroll="{ y: 'calc(90vh - 310px)', x: 2700 }"
      :columns="columns"
      :rowKey="(row, index) => row.Id"
      :row-selection="rowSelection"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :bordered="true"
      size="small">
      <span slot="Type" slot-scope="text, record">
        <template>
          {{ text }}
        </template>
      </span>
      <span slot="Batch" slot-scope="text, record">
        <template>
          {{ GetBatch(record) }}
        </template>
      </span>
      <span slot="Invoicenumber" slot-scope="text, record">
        <template>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>{{ ShowNumber(record) }}</span>
            </template>
            {{ ShowNumber(record, true) }}
          </a-tooltip>
        </template>
      </span>
      <span slot="Quantity" slot-scope="text, record">
        <template>
          {{ ShowQuantity(record) }}
        </template>
      </span>
      <span slot="SumiInvRCost" slot-scope="text, record">
        <template>
          {{ ShowAmount(record) }}
        </template>
      </span>
    </a-table>

    <DownLoadForSetp ref="DownLoadForSetp"></DownLoadForSetp>
  </a-card>
</template>

<script>
import moment from 'moment'
import { invoiceNumberAbbr } from '@/utils/Tools.js'
import DownLoadForSetp from '@/components/components/DownLoadForStep.vue'

export default {
  mounted () {
    this.getDataList()
  },
  computed: {
    rowSelection () {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectRows = selectedRowKeys
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.Id == null || !record.Id, // Column configuration not to be checked
            name: record.name
          }
        }),
        selectedRowKeys: this.selectRows
      }
    }
  },
  components: { DownLoadForSetp },
  data () {
    return {
      dateType: '单据',
      data: [],
      step: 0,
      allTotal: 0,
      showDownload: false,
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      sorter: { field: 'dDate', order: 'desc' },
      loading: false,
      columns: [
        { title: '单据编号', dataIndex: 'code', width: '150px', fixed: 'left', align: 'center' },
        {
          title: '单据日期',
          dataIndex: 'madedate',
          width: '150px',
          fixed: 'left',
          align: 'center',
          customRender: (value) => {
            if (value) {
              return value.substring(0, 10)
            }
          }
        },
        { title: '发票号码',
          dataIndex: 'Invoicenumber',
          width: '150px',
          fixed: 'left',
          align: 'center',
          scopedSlots: { customRender: 'Invoicenumber' }
        },
        { title: '发票类型', dataIndex: 'invoiceType', width: '150px', fixed: 'left', align: 'center' },
        { title: '客户简称', dataIndex: 'Customer', width: '300px' },
        { title: '业务员', dataIndex: 'Saler', width: '100px', align: 'center' },
        { title: '发货日期', dataIndex: 'SendDate', width: '150px', align: 'center', scopedSlots: { customRender: 'SendDate' } },
        { title: '开票日期', dataIndex: 'UpdateTime', width: '150px', align: 'center', scopedSlots: { customRender: 'UpdateTime' } },
        { title: '制单人', dataIndex: 'maker', width: '100px', align: 'center' },
        { title: '审核人', dataIndex: 'auditor', width: '100px', align: 'center' },
        { title: '存货名称', dataIndex: 'cInvName', width: '150px' },
        { title: '规格', dataIndex: 'cInvStd', width: '150px' },
        { title: '单位', dataIndex: 'GroupName', align: 'right', width: '150px', align: 'center' },
        {
          title: '数量',
          dataIndex: 'Quantity',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return Number(value).toFixed(4)
            }
          }
          // scopedSlots: { customRender: 'Quantity' }
        },
        { title: '批号', dataIndex: 'Batch', width: '150px', align: 'center', scopedSlots: { customRender: 'Batch' } },
        {
          title: '底价',
          dataIndex: 'MinPrice',
          width: '150px',
          align: 'right',
          scopedSlots: { customRender: 'MinPrice' },
          customRender: (value) => {
            if (value) {
              return this.$options.filters.NumberFormats(value)
            }
          }
        },
        {
          title: '高开',
          dataIndex: 'iInvRCost',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return Number(value).toFixed(2)
            }
          }
        },
        {
          title: '金额',
          dataIndex: 'SumiInvRCost',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return this.$options.filters.NumberFormats(value)
            }
          }
          // scopedSlots: { customRender: 'SumiInvRCost' }
        },
        {
          title: '税额',
          dataIndex: 'TaxAmount',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return Number(value).toFixed(2)
            }
          }
        },
        {
          title: '税率%',
          dataIndex: 'TaxRate',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return (Number(value).toFixed(2) * 100) + '%'
            }
          }
        },
        // {
        //   title: '含税总金额',
        //   dataIndex: 'InvoicingAmount',
        //   align: 'right',
        //   width: '150px',
        //   scopedSlots: { customRender: 'InvoicingAmount' }
        // },
        { title: '申请码', dataIndex: 'ApplyCode', width: '150px', align: 'center' },
        { title: '单据状态', dataIndex: 'Type', width: '150px', align: 'center', scopedSlots: { customRender: 'Type' } }

      ],
      queryParam: {
        rangeData: [
          moment().startOf('months').format('YYYY-MM-DD'),
          moment().endOf('months').format('YYYY-MM-DD')
        ]
      },
      selectRows: []
    }
  },
  methods: {
    openForm (rowIds) {
      if (rowIds) {
        this.selectRows = rowIds
      } else {
        this.selectRows = []
      }
      this.time = [this.timeFormat(new Date(new Date().getFullYear(), new Date().getMonth(), 1)), this.timeFormat(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0))]
      this.pagination.current = 1
      this.getDataList()
    },
    GetBatch (record) {
      if (record.Batch) {
        return record.Batch
      } else {
        return record.cInvStd.split(' ')[0]
      }
    },
    repossess () {
      this.queryParam = {}
      this.getDataList()
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }

      this.getDataList()
    },
    getDataList () {
      this.loading = true
      this.queryParam.DateType = this.dateType
      this.$http
        .post('/InvoiceManagement/ST_RDRecord_b/GetAccountForSaleList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.SortField,
          SortType: this.sorter.SortType,
          Search: this.queryParam
        })
        .then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.data = resJson.Data
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          } else {
            this.data = []
            this.$message.error(resJson.Msg)
          }
        })
    },
    // 导出
    async downloadTemplate () {
      this.$refs.DownLoadForSetp.openForm({
        pageRows: 5000,
        total: this.pagination.total,
        fileName: '销售明细表',
        url: '/InvoiceManagement/ST_RDRecord_b/Export',
        param: {
          Search: this.queryParam
        }
      })
    },
    timeFormat (val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD HH:mm')
    },
    ShowNumber (obj, eclipse) {
      if (this.queryParam.rangeData.length > 1) {
        var date0 = new Date(this.queryParam.rangeData[1])
        var date1 = new Date(obj.UpdateTime)
        // 05-0772
        if (date0 < date1) {
          return ''
        } else {
          if (eclipse) {
            return invoiceNumberAbbr(obj.Invoicenumber)
          }
          return obj.Invoicenumber
        }
      } else {
        if (eclipse) {
          return invoiceNumberAbbr(obj.Invoicenumber)
        }
        return obj.Invoicenumber
      }
    },
    ShowQuantity (obj) {
      if (obj.Type == '已退票') {
        return (-1 * (obj.SumiInvRCost / obj.iInvRCost)).toFixed(4)
      } else {
        return Number(obj.Quantity).toFixed(4)
      }
    },
    ShowAmount (obj) {
      if (obj.Type == '已退票') {
        return this.$options.filters.NumberFormats(obj.TaxAmount * (-1))
      } else {
        return this.$options.filters.NumberFormats(obj.TaxAmount)
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-table-thead th {
  text-align: center !important;
}
</style>
